<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="https://blz.nosdn.127.net/1/overwatch/images/common/overwatch.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/heroes.css">
    <link rel="stylesheet" href="./fonts/zmy_font/iconfont.css">

</head>

<body>
    <!-- 1、顶部导航栏模块 begin -->
    <div class="top">
        <nav class="desktop">
            <div class="desktop_left">
                <!-- logo模块 -->
                <a href="#" class="desktop_logo"></a>
                <!-- 左侧菜单栏模块 -->
                <div class="desktop_items">
                    <ul>
                        <li>
                            <a href="#" class="active">游戏<i class="iconfont"></i></a>
                        </li>
                        <li><a href="#">商城</a></li>
                        <li><a href="#">新闻</a></li>
                        <li><a href="#">电子竞技<i class="dropdown"></i></a></li>
                        <li><a href="#">积分福利</a></li>
                    </ul>
                </div>
            </div>
            <!-- 右侧菜单栏模块 -->
            <div class="desktop_profileItems">
                <ul>
                    <li><a href="#"><span></span> 未成年人家长监护</a></li>
                    <li><a href="#">支持</a></li>
                    <li><a href="#">我的账户<i class="dropdown"></i></a></li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- 1、顶部导航栏模块 end -->

    <!-- 2、固定定位导航栏模块 begin -->
    <nav class="menu">
        <div class="menu_left">
            <a href="#" class="menu_logo"></a>
            <a href="#" class="menu_pic">
                <i class="iconfont icon-fenlei-shouwangxianfeng"></i>
            </a>
            <ul class="menu_downList">
                <li data-menu="0">
                    游戏<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <div class="dropdown_menu_arrow"></div>
                        <div class="dropdown_menu_content">
                            <a href="./index.html">概述</a>
                        </div>
                    </div>
                </li>
                <li onclick="window.location.href='./heroes.html'">英雄</li>
                <li onclick="window.location.href='./crx.html'">第1赛季</li>
                <li data-menu="1">
                    新闻<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <!-- 隐藏的悬浮下拉列表的三角形 -->
                        <div class="dropdown_menu_arrow"></div>
                        <!-- 隐藏的悬浮下拉列表的内容 -->
                        <div class="dropdown_menu_content">
                            <a href="./ymx.html">新闻</a>
                            <a href="./zll.html">补丁</a>
                        </div>
                    </div>
                </li>
                <li onclick="window.location.href='./media.html'">视频图片</li>
                <li data-menu="2">
                    社区<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <!-- 隐藏的悬浮下拉列表的三角形 -->
                        <div class="dropdown_menu_arrow"></div>
                        <!-- 隐藏的悬浮下拉列表的内容 -->
                        <div class="dropdown_menu_content">
                            <a href="./zs.html">论坛<i class="iconfont icon-youshangjiantou"></i></a>
                            <dl>
                                <dt>电子竞技</dt>
                                <dd>守望先锋挑战者选拔赛<i class="iconfont icon-youshangjiantou"></i></dd>
                                <dd>守望先锋挑战者系列赛<i class="iconfont icon-youshangjiantou"></i></dd>
                                <dd>守望先锋联赛<i class="iconfont icon-youshangjiantou"></i></dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li data-menu="3">
                    商城<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <!-- 隐藏的悬浮下拉列表的三角形 -->
                        <div class="dropdown_menu_arrow"></div>
                        <!-- 隐藏的悬浮下拉列表的内容 -->
                        <div class="dropdown_menu_content">
                            <a href="#">商城<i class="iconfont icon-youshangjiantou"></i></a>
                            <dl>
                                <dt></dt>
                                <dd onclick="window.location.href='./jzx.html'">
                                    《守望先锋联赛》
                                    <p>个性化物品</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="menu_download">
            <a href="#">下载游戏</a>
        </div>
    </nav>
    <!-- 2、固定定位导航栏模块 end -->
    <!-- 英雄大模块 -->
    <div class="main-content">
        <!-- 头部英雄 -->
        <div class="pageHeader">
            <!-- 背景大图 -->
            <div class="w section-heroes ">
                <!-- 英雄 -->
                <div class="part">英雄</div>
            </div>
        </div>

        <!-- 中心英雄列表 -->
        <section class="heroList">
            <!-- 英雄模式列表 -->
            <div class="w section-list">
                <!-- 四个头部选择 -->
                <div class="filter-header">
                    <div class="filter-list">
                        <!-- 全部 -->
                        <div class="filter-item all active" id="select-all" data-type="All">
                            <div class="filter-inner">全部</div>
                        </div>
                        <!-- 重装 -->
                        <div class="filter-item" id="select-tank" data-type="Tank">
                            <div class="filter-inner">
                                <img src="https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Tank.svg"
                                    alt="">
                                <span>重装</span>
                            </div>
                        </div>
                        <!-- 输出 -->
                        <div class="filter-item" id="select-damage" data-type="Damage">
                            <div class="filter-inner">
                                <img src="https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Damage.svg"
                                    alt="">
                                <span>输出</span>
                            </div>
                        </div>
                        <!-- 支援 -->
                        <div class="filter-item" id="select-support" data-type="Support">
                            <div class="filter-inner">
                                <img src="https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg"
                                    alt="">
                                <span>支援</span>
                            </div>
                        </div>
                    </div>
                    <p class="description " id="All" style="display: block;">
                        《守望先锋》的主角是来自世界各地的强大英雄们，他们个性鲜明富有魅力，身世背景引人入胜。以下为完整的英雄阵容。</p>
                    <p class="description " id="Tank" style="display: none;">
                        重装英雄可以承受大量伤害，还能粉碎森严的防线，不论是抱团的敌人还是狭窄的要道都不在话下。身为重装英雄，领军冲锋由你一马当先。</p>
                    <p class="description " id="Damage" style="display: none;">
                        输出英雄负责搜寻敌人、全力出击并将其歼灭，本领和技能多样，风格百变。这些英雄的力量令人生畏，但自身较为脆弱，需要支援照应才能生存。</p>
                    <p class="description " id="Support" style="display: none;">
                        支援英雄可以通过治疗、护盾、伤害增强和封锁敌人来强化盟友。作为支援英雄，你就是团队生存的支柱。</p>
                </div>
                <!-- 所有英雄图片列表 -->
                <div class="hero-list">

                </div>
            </div>

        </section>

        <!-- 底部大图 -->
        <div class="closing-background">
            <div class="closing">
                <div class="content">
                    <div class="header">
                        <h2 class="heading">这个未来值得为之奋战。 加入我们！</h2>
                        <a href="https://ow.blizzard.cn/" class="btn-primary isDesktop">下载游戏</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 3、底部模块制作 begin -->
    <footer>
        <!-- 推广模块 -->
        <div class="socialFooter">
            <p class="txt">关注《守望先锋》“归来”</p>
            <!-- 图标列表 -->
            <ul class="list">
                <li>
                    <a href="https://weibo.com/u/5346440662">
                        <i class="iconfont icon-xinlangweibo"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont icon-weixin"></i>
                        <p class="img">
                            <img src="https://blz.nosdn.127.net/1/ow2/home/weixin.jpg" alt="">
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont icon-bilibili"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont icon-douyin"></i>
                        <p class="img douyin-img">
                            <img src="https://blz.nosdn.127.net/1/ow2/home/douyin.jpg" alt="">
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#" class="xiaohongshu">
                        <p class="img">
                            <img src="https://blz.nosdn.127.net/1/ow2/home/redbook.png" alt="">
                        </p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 版权模块 -->
        <div class="footer">
            <!-- 商业合作模块 -->
            <div class="footer_business">
                <ul class="clearfix">
                    <li><span class="icon icon1"></span>在线客服</li>
                    <li><span class="icon icon2"></span>反馈</li>
                    <li><span class="icon icon3"></span>加入我们</li>
                </ul>
            </div>
            <!-- 版权信息模块 -->
            <div class="cprt">
                <a href="" class="footer_logo"></a>
                <a href="" class="footer_origin"></a>
                <div class="footer_info">
                    <ul class="clearfix">
                        <li><a href="#">隐私</a>|</li>
                        <li><a href="#">法律</a>|</li>
                        <li><a href="#">条款</a>|</li>
                        <li><a href="#">API</a></li>
                    </ul>
                    <p>
                        ©2022 暴雪娱乐有限公司版权所有
                        <span>由上海网之易网络科技发展有限公司运营</span>
                        <span> | </span>
                        <span>新广出审[2016]378号</span>
                    </p>
                    <p>
                        <span>文网游进字[2016]0025号</span>
                        <span> | </span>
                        <a href="#">增值电信业务经营许可证编号：沪B2－20080012</a>
                        <span> | </span>
                        <a href="#">沪ICP备：沪B2－20080012－15</a>
                    </p>
                    <p>
                        互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502052167号
                        <span> | </span>
                        <a href="#">上海市网络游戏行业自律公约</a>
                    </p>
                    <p>
                        <a href="#">
                            <img src="https://blz.nosdn.127.net/1/frame/cprt/zx110.png" alt="">
                        </a>
                        <a href="#">
                            <img src="https://blz.nosdn.127.net/1/frame/cprt/sgs-icon.png" alt="">
                        </a>
                        <a href="#">
                            <img src="https://blz.nosdn.127.net/1/frame/cprt/icon20120516.png" alt="">
                        </a>
                        <span>| 适龄提示：适合13岁及以上使用 </span>
                        <a href="#">家长监护工程</a>
                        <span> | </span>
                        <a href="#">网上有害信息专区</a>
                    </p>
                </div>
            </div>
            <!-- 脚注 -->
            <div class="footer_tips">
                <p>
                    积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。
                    <br />
                    健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                </p>
            </div>
        </div>
    </footer>
    <!-- 3、底部模块制作 end -->
    <script src="./js/common.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/lodash.min.js"></script>
    <script src="js/heroes.js"></script>
</body>

</html>